<template>
  <div class="userAction" :data-app="true">
    <!--背景图-->
    <div class="bgc">
      <v-img
          :src="url"
          gradient="to top, rgba(0,0,0,.44), rgba(0,0,0,.44)"
      />
      <AddComment />
    </div>

    <!--时间轴评论-->
  <v-timeline dense align-top class="commentList">
    <v-timeline-item small v-for="(item,index) in this.$store.state.comment.commentList" :key="item.aId" :color="index % 2 === 0 ? '#80CBC4' : '#e91e63'">
      <CommentCard :commentInfo="item" :index="index"/>
    </v-timeline-item>
  </v-timeline>
  </div>
</template>

<script lang="ts">
import Vue from 'vue'
import CommentCard from './CommentCard/CommentCard.vue'
import AddComment from "@/views/UserAction/AddComment/AddComment.vue";
import {getF,getFAns} from '@/api/pic'
export default Vue.extend({
  name: "UserAction",
  data: () => ({
    url: ''
  }),
  components: {
    CommentCard,
    AddComment
  },
  mounted() {
    getF().then(res => {
      const {code,url} = res as unknown as getFAns
      if(code === 200){
        this.url = url
      }
    })
    this.$store.dispatch('comment/getCommentInfo')
  },
  computed: {
    commentList(){
      return this.$store.state.comment.commentList
    }
  }
})
</script>

<style lang="scss">
.userAction {
  background-image: linear-gradient(to top, #a8edea 0%, #fed6e3 100%);
  .bgc {
    position: relative;
  }
  .v-timeline:before {
    background: #999 !important;
    left: 47px
  }
  .commentList {
    padding-right: 18vw;
  }

}
</style>